<template>
  <div class="record">
    <div class="top-img">
      <img src="../assets/image/record.jpg" alt="">
    </div>
    <div class="record-wrapper">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="所在小区" prop="estate">
          <el-input v-model="ruleForm.estate" placeholder="请输入所在小区"></el-input>
        </el-form-item>
       
        <el-form-item label="垃圾类型" prop="categoryId">
          <el-select v-model="ruleForm.categoryId" placeholder="请选择分类" style="width:100%;">
            <el-option
              v-for="item in categories"
              :label="item.category_name"
              :value="item.id"
              :key="item.category_type"
            ></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="房间号" prop="room_num">
          <el-input v-model="ruleForm.room_num" placeholder="请输入房号"></el-input>
        </el-form-item>
        <el-form-item label="垃圾桶" prop="dustbinId">
          <el-select v-model="ruleForm.dustbinId" placeholder="请选择垃圾桶设备号" style="width:100%;">
            <el-option
              v-for="item in dustbins"
              :label="item.device_code"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {},
      categories: null,
      dustbins: null,
      rules: {
        room_num: [
          { required: true, message: "请输入房号", trigger: "blur" }
        ],
        categoryId: [
          { required: true, message: "请选择垃圾分类", trigger: "change" }
        ],
        estate: [{required: true, message: '请输入小区', trigger: 'blur'}],
        dustbinId: [{required: true, message: "请选择垃圾桶设备号", trigger: "change"}]
      }
    };
  },
  mounted() {
    this.getCategory();
    this.getDustbin()
  },
  methods: {
    async getDustbin() {
      const res = await this.$http.get('/users/dustbin')
      this.dustbins = res.data
    },
    async getCategory() {
      const res = await this.$http.get("/users/category");
      this.categories = res.data;
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const res = await this.$http.post('/users/createRecord', {...this.ruleForm})
          if(res.code === 0) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.ruleForm = {}
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="less" scoped>
@import "../assets/style/record.less";
</style>